<template>
  <transition name="fade">
    <div
      v-show="visible"
      class="m-search-overlay"
      style="z-index:100"
      @click="toggle"
    >
      <transition name="slide">
        <div class="m-search-wrap" @click.stop>
          <input
            class="m-search-input"
            type="text"
            v-show="visible"
            ref="input"
          />
        </div>
        <!-- <v-text-field
          v-show="visible"
          autofocus
          class="m-search-input"
          clearable
          prepend-icon="search"
          @click.stop
        ></v-text-field> -->
      </transition>
    </div>
  </transition>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import scroll from "@/components/scroll.vue";

@Component({})
export default class Search extends Vue {
  private visible: boolean = false;
  private match: any = "";
  constructor() {
    super();
  }

  updated() {
    if (this.visible === true) {
      // @ts-ignore
      this.$refs.input.focus();
    }
  }

  toggle() {
    this.visible = !this.visible;
  }

  mounted() {
    console.log(33);
  }
}
</script>

<style lang="scss" scoped>
.m-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
}
.m-search-wrap {
  box-sizing: border-box;
  padding: 8px;
}
.m-search-input {
  // box-sizing: border-box;
  width: 100%;
  padding-left: 16px;
  line-height: 32px;
  background: #fff;
  z-index: 10;
  border-radius: 2px;
  color: #000;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
  z-index: 50;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.2s;
}

.slide-enter,
.slde-leave-to {
  left: 80%;
}

// .slide-left-enter,
// .slide-right-leave-active {
//   opacity: 0;
//   transform: translate(-50px, 0);
// }
// .slide-left-leave-active,
// .slide-right-enter {
//   opacity: 0;
//   transform: translate(50px, 0);
// }
</style>
